.pe-transfer {
    --pe-transfer-width: 200px;
    --pe-transfer-padding: 10px;
    --pe-transfer-btn-padding: 20px;
}

.pe-transfer {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    padding: var(--pe-transfer-padding);

    .pe-transfer-left-btn {
        margin-left: var(--pe-transfer-btn-padding);
    }

    .pe-transfer-right-btn {
        margin-right: var(--pe-transfer-btn-padding);
    }

    .pe-transfer-content {
        width: var(--pe-transfer-width);
        border-radius: var(--pe-border-radius);
        border: 1px solid var(--pe-color-border);
        background-color: var(--pe-color-white);
        overflow: hidden;

        .pe-transfer-header {
            width: 100%;
            height: 40px;
            background-color: #e7e7e7;
            border-bottom: 1px solid var(--pe-color-border);
            display: flex;
            justify-content: space-between;
            align-items: center;
            overflow: hidden;
            padding: 0 var(--pe-transfer-padding);

            .pe-transfer-header-font {
                color: #a9a9a9;
                font-size: var(--pe-font-size-small);
            }
        }

        .pe-transfer-search {
            padding: var(--pe-transfer-padding);
        }

        .pe-transfer-main {
            padding: 0 var(--pe-transfer-padding);
            height: 280px;
            overflow: auto;

            .pe-transfer-checkbox {
                width: 100%;
                margin: 0;
            }
        }

        .pe-transfer-footer {
            width: 100%;
            height: 40px;
            padding: 0 var(--pe-transfer-padding);
            display: flex;
            align-items: center;
            border-top: 1px solid var(--pe-color-border);
            overflow: hidden;
        }
    }
    
}